<template>
  <div class="my-load-more por"
       :class="{'vh100 ova': !unsetHeight}"
       ref="loadMoreDom">
    <div class="load-more-inner"
         infinite-scroll-disabled="disabled"
         infinite-scroll-immediate-check="fill"
         infinite-scroll-distance="distance"
         infinite-scroll-throttle-delay="delay"
         v-infinite-scroll="loadMore">
      <div ref="slotDom">
        <slot></slot>
      </div>
      <template v-if="showBottom && !hideBottom">
        <slot name="bottom">
          <load-more-tip :noData="noData"
                         :loading="disabled"></load-more-tip>
        </slot>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadMore',
  props: {
    noData: {
      type: Boolean,
      default: false
    },
    unsetHeight: {
      type: Boolean,
      default: false
    },
    delay: {
      type: Number | String,
      default: 200
    },
    fill: {
      type: Boolean,
      default: true
    },
    distance: {
      type: Number | String,
      default: 100
    },
    showBottom: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    noData() {
      this.next()
    },
    disabled(val) {
      this.$emit('loading', val)
    },
    sH(h) {
      this.hideBottom = this.lmH > this.sH
    }
  },
  data() {
    return {
      disabled: false,
      lmH: 0,
      sH: 0,
      hideBottom: false
    }
  },
  mounted() {
    this.lmH = this.$refs.loadMoreDom.offsetHeight
    this.next()
  },
  methods: {
    loadMore() {
      this.disabled = true
      this.$emit('loadMore', this.next)
      this.$emit('bottom', this.next)
    },
    next() {
      this.disabled = this.noData
      this.$nextTick(() => {
        this.sH = this.$refs.slotDom.offsetHeight
      })
    }
  }
}
</script>

<style scoped lang="less">
</style>